<template>
  <div class="login-box">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>登录</span>
        </div>
      </template>
      <el-form ref="loginFormRef" label-position="left" status-icon label-width="100px" :rules="rules" :model="loginForm">
        <el-form-item label="用户名" prop="username" >
          <el-input v-model="loginForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码" prop="password" >
          <el-input v-model="loginForm.password" placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import type { FormInstance, FormItemRule } from 'element-plus'
import { useUserStore } from '@/stores/user';
const router = useRouter()
const loginFormRef = ref<FormInstance>()
const userStore = useUserStore()

type TLoginForm = {
  username: string,
  password: string
}
type TRules = {
  [k in keyof TLoginForm]?: Array<FormItemRule>
}

const loginForm: TLoginForm = reactive({
  username: 'admin',
  password: 'admin',
})

// 定义规则
const rules = reactive<TRules>({
  username: [
    { required: true, message: '请输入用户名' },
  ],
  password: [
    { required: true, message: '请输入密码' },
  ],
})
const submitForm = () => {
  loginFormRef.value?.validate((valid, fields) => {
    if (valid) {
      userStore.userLogin(loginForm, () => {
        router.push('/home')
      })
    }
  })
}

</script>

<style lang="less" scoped>
.login-box{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #a5ca84;
  background-image: url('@/assets/images/image05.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
.box-card {
  width: 480px;
  .card-header{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
  }
}
</style>
